<template>
  <div class="login_container">
    <div class="login_box">
      <div class="login_left">
        <div class="title">
          <div>欢迎进入</div>
          <div>事滴屋灵依社区</div>
        </div>
      </div>
      <div class="login_right">
        <!-- 登录表单区域 -->
        <el-form
          v-if="form == true"
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules"
          class="login_form"
        >
          <div class="login_form_title"><div>账号密码登录</div></div>
          <!-- 用户名 -->
          <el-form-item prop="phone">
            <el-input
              v-model="loginForm.phone"
              prefix-icon="el-icon-phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!-- 按钮区域 -->
          <el-form-item class="btns">
            <el-link class="link" type="primary" @click="changeForm"
              >用户注册</el-link
            >
            <!-- <el-button type="info" @click="resetLoginForm">注册</el-button> -->
            <el-button class="btn" type="primary" @click="login"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 用户注册 -->
        <el-form
          v-if="form == false"
          ref="registerFormRef"
          :model="registerForm"
          :rules="registerFormRules"
          class="login_form"
        >
          <div class="login_form_title"><div>用户注册</div></div>
          <!-- 用户名 -->
          <el-form-item prop="name">
            <el-input
              v-model="registerForm.name"
              prefix-icon="el-icon-user-solid"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input
              v-model="registerForm.phone"
              prefix-icon="el-icon-phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              v-model="registerForm.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!-- 按钮区域 -->
          <el-form-item class="btns">
            <el-link class="link" type="primary" @click="changeForm"
              >返回登录</el-link
            >
            <el-button class="btn" type="primary" @click="register"
              >注册</el-button
            >
            <!-- <el-button type="primary" @click="login">登录</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: true,
      // 这是登录表单的数据绑定对象
      loginForm: {
        phone: "", //123456
        password: "", //123456
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 3,
            max: 11,
            message: "非法手机号",
            trigger: "blur",
          },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      registerForm: {
        name: "",
        phone: "", //123456
        password: "", //123456
      },
      registerFormRules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        // 验证用户名是否合法
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 3,
            max: 11,
            message: "非法手机号",
            trigger: "blur",
          },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    changeForm() {
      this.form = !this.form;
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        console.log("valid:" + valid);
        if (valid) {
          console.log("登录");
          const { data: res } = await this.$http.post(
            "login/login",
            this.loginForm
          );
          if (res.code !== 200) {
            return this.$message.error(res.data.message);
          }
          window.localStorage.setItem("token", res.data.token);
          //首页
          // this.$router.push("/message");
        } else {
          console.log("表单问题");
          return;
        }
      });
    },
    register() {
      this.$refs.registerFormRef.validate(async (valid) => {
        console.log("valid:" + valid);
        if (valid) {
          console.log("登录");
          const { data: res } = await this.$http.post(
            "user/addUser",
            this.registerForm
          );
          if (res.code !== 200) {
            return this.$message.error(res.message);
          }
          return this.$message.success(res.message);
        } else {
          console.log("表单问题");
          return;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  background-image: url("../../assets/bc.jpg");
  height: 100%;
  // width: 100%;
}

.title {
  font-size: 30px;
  color: white;
}
.login_box {
  width: 800px;
  height: 450px;
  background-color: #0000009f;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  .login_left {
    width: 370px;
    height: 450px;
    border-radius: 10px 0px 0px 10px;
    display: flex;
    justify-content: center;
    .title {
      margin-top: 120px;
      text-align: left;
      font-size: 28px;
      letter-spacing: 2px;
      div {
        margin-bottom: 20px;
      }
    }
  }
  .login_right {
    width: 530px;
    height: 450px;
    background-color: white;
    .login_form {
      position: absolute;
      bottom: 0;
      width: 400px;
      padding: 0 20px;
      box-sizing: border-box;
      top: 50%;
      left: 50%;
      transform: translate(-10%, -50%);
      .login_form_title {
        text-align: left;
        border-bottom: 1px solid rgba(206, 206, 206, 0.671);
        margin-bottom: 20px;
        div {
          display: inline-block;
          padding-bottom: 15px;
          border-bottom: 1px solid #0b85ff;
          color: #0b85ff;
          font-size: 18px;
        }
      }
    }
  }
}

.btns {
  position: relative;
  .link {
    position: absolute;
    left: 0;
  }
  .btn {
    width: 100px;
    position: absolute;
    right: 0;
  }
}
</style>